<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 22:47:46
 * @LastEditTime: 2024-03-10 20:01:28
 * @FilePath: \env-manager-pc\src\views\assets\order\index.vue
-->
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import edit from './edit.vue'
import detail from './detail.vue'
import type { orderForm } from '@/api/modules/types/assets'
import { useAssetFactorys, useAssetModelClassifys, useAssetModels } from '@/utils/dataHook'
import type { doLoading } from '@/types/page'
import { QueryObj } from '@/utils/dataHook/data'
import { usePage } from '@/utils/commonHook'
import assetsApi from '@/api/modules/assets'
import { ModelType } from '@/types/common'

const searchData = reactive(new QueryObj({
  objType: 'DIM.FilterCollection',
  Filters: [{
    Type: 'DIM.GYHR.OrderFormFilters.DateFilter',
    FilterKey: 'PlaceDate',
    valueKey: 'PlaceDate',
  }, {
    Type: 'DIM.GYHR.OrderFormFilters.AssetModelFilter',
    FilterKey: 'AssetFactory',
    valueKey: 'AssetFactory',
  },
  { Type: 'DIM.GYHR.OrderFormFilters.AssetModelFilter',
    FilterKey: 'AssetModel',
    valueKey: 'AssetModel',
  },
  {
    Type: 'DIM.GYHR.OrderFormFilters.OrderFormStrFilter',
    FilterKey: 'OFID',
    valueKey: 'OFID',
  }, {
    Type: 'DIM.GYHR.OrderFormFilters.AssetModelFilter',
    FilterKey: 'AssetModelClassify',
    valueKey: 'AssetModelClassify',
  }, {
    Type: 'DIM.GYHR.OrderFormFilters.OrderFormStrFilter',
    FilterKey: 'Recipient',
    valueKey: 'Recipient',
  }],
}))
const { page, pageNumChange, pageSizeChange } = usePage(getTableData)

const factorys = useAssetFactorys()
const ModelClassifys = useAssetModelClassifys()
const AssetModels = useAssetModels()
const editRef = ref()
const detailRef = ref()

function search() {
  page.PageNum = 1
  getTableData()
}
const tableData = ref<orderForm[]>([])
const loading = ref(false)

async function getTableData() {
  loading.value = true
  try {
    const res = await assetsApi.GetOrderForms({
      objFilter: searchData.getQuery(),
      objType: searchData.objType,
      pageSize: page.PageSize,
      pageNum: page.PageNum,
    })
    loading.value = false
    // console.log('%c [ res ]-27', 'font-size:13px; background:pink; color:#bf2c9f;', res)
    const { Objs, RecordsetCount } = res
    tableData.value = Objs || []
    page.RecordsetCount = RecordsetCount
  }
  catch (e) {
    loading.value = false
  }
}

function toCreate() {
  editRef.value.open({ type: ModelType.add })
}
function toEdit(row: orderForm) {
  editRef.value.open({ type: ModelType.edit, data: row })
}

getTableData()

async function submitEdit(formData: orderForm, doLoading: doLoading) {
  try {
    doLoading(true)
    const isCreate = !formData.ObjID
    isCreate
      ? await assetsApi.AddOrderForm({
        orderForm: formData,
      })
      : await assetsApi.UpdateOrderForm({
        orderFormObjID: formData.ObjID,
        orderForm: formData,
      })
    getTableData()
    editRef.value.close()
    ElMessage.success({
      message: isCreate ? '新增成功' : '编辑成功',
      type: 'success',
    })
  }
  catch (e) {
    doLoading(false)
  }
}

async function toDel(row: orderForm) {
  await ElMessageBox.confirm(`确定删除订单 ${row.OrderFormCode} 吗？`, '提示', {
    type: 'warning',
  })
  await assetsApi.DeleteOrderForm({ orderFormObjID: row.ObjID })
  ElMessage.success({
    message: '删除成功',
    type: 'success',
  })
  getTableData()
}

function toDetail(row: any) {
  detailRef.value.open({ data: row })
}
</script>

<template>
  <div>
    <PageHeader>
      <template #content>
        <ElForm label-width="100">
          <ElRow>
            <ElCol :span="6">
              <ElFormItem label="订单日期">
                <ElDatePicker v-model="searchData.PlaceDate" value-format="YYYYMMDD" type="daterange" />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="生成厂家">
                <ElSelect v-model="searchData.AssetFactory" class="w-full" clearable>
                  <ElOption v-for="item in factorys" :key="item.ObjID" :label="item.Name" :value="item.ObjID" />
                </ElSelect>
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="型号">
                <ElSelect v-model="searchData.AssetModel" class="w-full" clearable>
                  <ElOption v-for="item in AssetModels" :key="item.ObjID" :label="item.Name" :value="item.ObjID" />
                </ElSelect>
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="订单号">
                <ElInput v-model="searchData.OFID" clearable />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="产品名称">
                <ElSelect v-model="searchData.AssetModelClassify" class="w-full" clearable>
                  <ElOption v-for="item in ModelClassifys" :key="item.ObjID" :label="item.Name" :value="item.ObjID" />
                </ElSelect>
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="联系人">
                <ElInput v-model="searchData.Recipient" clearable />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6" :push="6" class="flex flex-justify-end">
              <ElButton type="primary" @click="search">
                查询
              </ElButton>
              <ElButton type="success" @click="toCreate">
                新增
              </ElButton>
              <ElButton type="warning">
                导出
              </ElButton>
            </ElCol>
          </ElRow>
        </ElForm>
      </template>
    </PageHeader>
    <PageMain>
      <div v-auto-height="85">
        <vxe-table
          auto-resize border
          height="100%"
          :data="tableData"
          :loading="loading"
          :row-config="{ isCurrent: true }"
        >
          <VxeColumn type="seq" title="序号" width="150" />
          <VxeColumn field="OrderFormCode" title="订单号" width="120" />
          <VxeColumn field="PlaceDate" title="订单日期" width="140" :formatter="({ cellValue }) => dayjs(cellValue).format('YYYY/MM/DD')" />
          <VxeColumn field="AssetFactoryName" title="生产厂家" min-width="120" />
          <VxeColumn field="AssetModelClassifyName" title="产品名称" width="150" />
          <VxeColumn field="AssetModelName" title="型号" width="150" />
          <VxeColumn field="OrderFormCode" title="设备编码范围" width="150">
            <template #default="{ row }">
              <el-button link type="primary" @click="toDetail(row)">
                {{ row.AssetCodeSNStart }} - {{ row.AssetCodeSNEnd }}
              </el-button>
            </template>
          </VxeColumn>
          <VxeColumn field="StipulateDate" title="约定发货日期" width="150" :formatter="({ cellValue }) => dayjs(cellValue).format('YYYY/MM/DD')" />
          <VxeColumn field="RecAddress" title="收货地点" min-width="150" />
          <VxeColumn field="Recipient" title="联系人" width="150" />
          <VxeColumn field="RecipientTel" title="联系电话" width="150" />
          <VxeColumn field="operate" fixed="right" title="操作" width="160">
            <template #default="{ row }">
              <!-- <ElButton type="primary" link>
              查看
            </ElButton> -->
              <ElButton type="success" link @click="toEdit(row)">
                编辑
              </ElButton>
              <ElButton type="danger" link @click="toDel(row)">
                删除
              </ElButton>
            </template>
          </VxeColumn>
        </vxe-table>
      </div>
      <ElPagination
        class="mt-4"
        :page-size="page.PageSize"
        :total="page.RecordsetCount"
        :current-page="page.PageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        @current-change="pageNumChange"
        @size-change="pageSizeChange"
      />
    </PageMain>
    <edit ref="editRef" @submit="submitEdit" />
    <detail ref="detailRef" />
  </div>
</template>
